<!--
 * @Date: 2024-05-29 11:37:50
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-08-14 16:08:48
-->
<template>
    <div class="emoji-btn-container">
        <EmojiPicker
            :on-emoji-picked="onEmojiPicked"
            :on-blur="handlePickerBlur"
            v-if="state.isActive"
        />

        <img
            src="@/assets/emoji.png"
            alt=""
            class="btn"
            :class="{ disabled: disabled }"
            @click="openPicker"
        />
    </div>
</template>

<script setup>
import EmojiPicker from './../EmojiPicker.vue'
import { computed, reactive, inject } from 'vue'

const props = defineProps({
    onEmojiPicked: {
        type: Function,
        required: true,
    },
})

const iconDisabledData = inject('iconDisabled')

const disabled = computed(() => {
    return iconDisabledData().disabled.value
})

const state = reactive({
    isActive: false,
})

const openPicker = (e) => {
    if (disabled.value) return
    state.isActive = !state.isActive
}
const handlePickerBlur = () => {
    state.isActive = false
}
</script>

<style lang="scss" scoped>
.emoji-btn-container {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-content: center;

    .btn {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    .disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

.sc-user-input--emoji-icon-wrapper {
    background: none;
    border: none;
    padding: 0px;
    margin: 0px;
    outline: none;
}

.sc-user-input--emoji-icon-wrapper:focus {
    outline: none;
}

.sc-user-input--emoji-icon {
    height: 18px;
    cursor: pointer;
    align-self: center;
}

.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon path,
.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon circle,
.sc-user-input--emoji-icon.active path,
.sc-user-input--emoji-icon.active circle,
.sc-user-input--emoji-icon:hover path,
.sc-user-input--emoji-icon:hover circle {
    filter: contrast(15%);
}
</style>
